<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.global.js"></script>
</head>
<body>

<div id="app">
    {{message}}
    <china v-bind:parent-msg="message" v-on:child-event="parentFn"></china>
</div>

<script type="text/javascript">

    const china = {
        data(){
            return {
                message:"我是子组件"
            }
        },
        props:['parentMsg'],
        // computed:{
        //     abc:{
        //         get(){
        //             return this.parentMsg;
        //         },
        //         set(v){
        //
        //         }
        //     }
        // },
       // emits:['child-event'],
        emits:{
            'child-event':(v)=>{
                console.log("还在子组件里呢",v)
                return true;
            }
        },
        methods:{
            childUpdate(v){
                this.$emit('child-event',v);
            }
        },
        template:`
            <div>{{message}}</div>
            <div>{{parentMsg}}</div>
            <button v-on:click="childUpdate(message)">update</button>
            <!--<div>{{abc}}</div>-->
        `
    };
    const vm = Vue.createApp({
        data(){
            return {
                message:"hi"
            }
        },
        components:{
            'china':china
        },
        methods:{
            parentFn(v){
                console.log("你爸爸看到了",v)
            }
        }
    }).mount("#app");
</script>
</body>
</html>